﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="repair_detail.aspx.cs" Inherits="AutoFix.repair_detail" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="js/jquery-scrollto.js"></script>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="AdditionalPlaceHolder" runat="server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="MessagePlaceHolder" runat="server">
    the detail information of the article clicked
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div id="pageActionMessage" runat="server"></div>
    <div id="column-left">
        <div class="written-by-holder">
            <div class="written-by-sub-holder"><span class="text-size-one">Written By:</span></div>

            <div class="written-by-sub-holder-user-image">
                <div class="written-by-user-image">
                    <asp:Image ID="imgUser" runat="server" CssClass="written-by-user-image" />
                </div>
            </div>
            <div class="written-by-sub-holder">
                <asp:HyperLink ID="lnkWrittebBy" runat="server" />
            </div>
            <div class="clear"></div>
        </div>
        <div class="item-holder-detail">
            <div class="item-image-background">
                <asp:Image ID="imgArticleImage" runat="server" CssClass="item-image-background" />
            </div>
        </div>
        
        <div class="column-fixed">
        <div id="go-to-links-holder">
            <div class="text-size-one-bold">Go To:</div>
            <ul class="text-size-one">
                <asp:Repeater ID="rptrGoToLinks" runat="server">
                    <ItemTemplate>
                        <li><a class="stepAnchor" href="<%# "#step" + DataBinder.Eval(Container, "DataItem.StepID") %>"><%# DataBinder.Eval(Container, "DataItem.StepName") %></a></li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
        </div></div>
    </div>
    <div class="column-right">
        <div id="column-right-detail-holder">
            <h1>
                <asp:Label ID="lblArticleName" runat="server" Text="Article Name" CssClass="text-size-three-bold" /></h1>
            <div>
                <span class="rating">
                    <asp:Rating ID="articleRating" runat="server" MaxRating="5" StarCssClass="rating-star" WaitingStarCssClass="saved-rating-star" FilledStarCssClass="filled-rating-star" EmptyStarCssClass="empty-rating-star" OnChanged="articleRating_Changed"  />
                </span>&nbsp;<span class="text-size-one-bold">Last Updated Date:</span>
                <asp:Label ID="lblLastUpdatedDate" runat="server" CssClass="text-size-one"></asp:Label>
            </div>
            <div id="step-section-holder">
       <asp:ListView ID="lstSteps" runat="server" OnItemDataBound="lstSteps_ItemDataBound">
           <ItemTemplate>
                        <h2 class="text-size-two-bold" id='<%# "step" + DataBinder.Eval(Container, "DataItem.StepID") %>'>
                            
                            <asp:Label ID="lblStepTitle" runat="server" /></h2>
                        <p>
                            <asp:Label ID="lblStepContent" runat="server" Visible="false" />

                        </p>
                        <asp:Panel ID="itemHolder" runat="server" Visible="false">
                            <video width="640" height="320" controls id="vdoStep" runat="server">
                                Your browser does not support the video tag.
                            </video>
                            </asp:Panel>
               <br />
               </ItemTemplate>
            </asp:ListView>
                </div>
            <div id="article-tag-holder">
                <div><span class="text-size-one-bold">Tags</span></div>
                <div>
                    <asp:DataList ID="dtlTags" runat="server" CssClass="text-size-one" RepeatDirection="Horizontal" RepeatColumns="8" ItemStyle-CssClass="tag-spacer">
                        <ItemTemplate>
                            <%# DataBinder.Eval(Container, "DataItem.Tag") %>
                        </ItemTemplate>
                    </asp:DataList>
                </div>
            </div>
            <div id="comments-holder">
                <div><span class="text-size-one-bold">Comments</span></div>
                <asp:Repeater ID="rptrComments" runat="server">
                    <ItemTemplate>
                        <div class="comment-box-holder">

                            <div class="commenter">

                                <asp:Label ID="lblCommenterName" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.UserName") %>' />
                                said:
                            </div>
                            <div class="comment">
                                <%# DataBinder.Eval(Container, "DataItem.CommentText") %>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
                <div class="button-holder" id="commentArea" runat="server" visible="false">
                    <asp:TextBox ID="txtComment" runat="server" CssClass="text-area" TextMode="MultiLine" />&nbsp;<asp:Button ID="btnAddComment" runat="server" Text="Add Commment" CssClass="button" OnClick="btnAddComment_Click" /><div class="clear"></div>
                </div>

            </div>

        </div>
    </div>
    <div class="column-right">
        <div id="model-info-holder">
            <div id="model-image">
                <asp:Image ID="imgModelImage" runat="server" />
            </div>

            <div id="model-name">
                <asp:Label ID="lblModelAndType" runat="server" CssClass="text-size-two-bold" /><br />
                <asp:Label ID="lblYear" runat="server" Text="2006" CssClass="text-size-two" />
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <script type="text/javascript">
        $(".stepAnchor").bind("click", ScrollToItem);
        function ScrollToItem() {            
            var t = $(this).attr("href");
            $(t).ScrollTo({
                duration: 2000,
                easing: 'linear'
            });
        }
    </script>
    
</asp:Content>
